import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { withStyles } from 'material-ui/styles'
import Button from 'material-ui/Button'
import TextField from 'material-ui/TextField'
import List, { ListItem, ListItemText } from 'material-ui/List'
import Dialog, { DialogActions, DialogContent, DialogTitle, DialogContentText } from 'material-ui/Dialog'
import Radio, { RadioGroup } from 'material-ui/Radio'
import {
  FormLabel,
  FormControl,
  FormGroup,
  FormControlLabel,
  FormHelperText,
} from 'material-ui/Form'
import Checkbox from 'material-ui/Checkbox'
import _ from 'lodash'
import {options} from '../../../common/model/feedback'

class Feedback extends Component {
  constructor(props) {
    super(props)
    this.state = {
      feedback: {
        selectedOptions: [],
        comment: ''
      },
    }
  }

  send = async () => {
    await this.props.sendFeedback(this.state.feedback)
    this.props.handleMessage({
      visiable: true,
      content: '收到, 稍后处理...'
    })
  }

  setComment = (comment) => {
    this.setState({
      feedback: Object.assign(this.state.feedback, {
        comment
      })
    })
  }

  handleCancel = () => {
    this.props.setShowFeedback(false);
  };

  handleChange = (id) => {
    let selectedOptions = this.state.feedback.selectedOptions
    if(selectedOptions.includes(id)){
      selectedOptions = _.without(selectedOptions, id)
    }else {
      selectedOptions.push(id)
    }
    this.setState({
      feedback: Object.assign(this.state.feedback, {
        selectedOptions
      })
    })
  }

  getCheckedState(id) {
    return this.state.feedback.selectedOptions.includes(id)
  }

  render() {
    const { value, ...other } = this.props
    return (
      <Dialog
        maxWidth="xs"
        {...other}
      >
        <DialogTitle>欢迎吐槽</DialogTitle>
        <DialogContent>
          <FormControl component="fieldset">
            <FormGroup>
              {
                options.map(option => {
                  return (
                    <FormControlLabel
                      control={
                        <Checkbox
                          checked={this.getCheckedState(option.id)}
                          onChange={(e) => this.handleChange(e.target.value)}
                          value={option.id}
                        />
                      }
                      label={option.label}
                    />
                  )
                })
              }
            </FormGroup>
            <TextField
              margin="dense"
              id="name"
              label="问题描述"
              type="error"
              multiline
              fullWidth
              onChange = {(e) => this.setComment(e.target.value)}
              value = {this.state.feedback.comment}
            />
          </FormControl>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => this.handleCancel()} color="primary">
            取消
          </Button>
          <Button onClick={() => this.send()} color="primary">
            发送
          </Button>
        </DialogActions>
      </Dialog>
    )
  }
}

export default Feedback